import React from 'react'
import {Route,Link,Switch,Redirect,useHistory,useLocation} from 'react-router-dom';
import './content.css';
import Detail from './Detail';
import Home from './Home';
import { useAuth } from './AuthProvider';

const New=(props)=>{
    console.log(props);//!props是空{}
    return <>
            {/*//*在哪里用children属性，就在哪里写 ？？？？？？？？？？？？？*/}
            {props.children}
            <h1>新手入门</h1>
        </>
}
const Collect=()=><h1>收藏页面</h1>
const User=(props)=>{
    console.log(props)
    return <h1>用户详情页--{props.match.params.userName}</h1>
}

const Login=()=>{
    const {setIslogin}=useAuth();
    const history=useHistory();
    const location=useLocation();
    const login=()=>{
        //* 改变状态 
        setIslogin(true);
        localStorage.setItem('islogin',true)

        //* state是collect传过来的state
        history.replace(location.state||'/');//*如果没有点其他页面，location.state为null，所以现在直接点登录，跳转到首页
        //* 注意是replace方法，替换 
    }
    return(
        <div>
            <h2>登录页面</h2>
            <button onClick={login}>登录</button>
        </div>
    )
}

//! 代权限路由
                    //! 解构出来，直接重命名，必须保证组件首字母大写
// const PrivateRoute=({path,compontent:Com})=>{

//     return <Route path={path} render={(props)=>{
//         //!如果没登录，页面跳走
//         if(!localStorage.getItem('isLogin')){
//             props.history.push('/login');
//         }
//         return <Com/>
//     }}/>
// }
//!  ...rest代表所有属性
                        //? 把所有属性收起来放到rest里面
const PrivateRoute=({compontent:Com,children,...rest})=>{
            //*把rest展开，所有属性拿出来 
    return <Route {...rest} render={(props)=>{
        console.log(children)
        console.log(props)
        if(!localStorage.getItem('islogin')){
            //*js跳转
            // props.history.push('/login');
            return <Redirect to={
                {
                    pathname:'/login',
                    state:props.location //这里的location是collect的location
                }
            }/>
        }
        //*如果Com没有，说明单标签，就显示children，如果Com，children都没有，就要看render了
        return Com?<Com/>:children
    }}/>
}



//! 点击后，Conrent中左侧变化 ，右侧保持不变
const Content = () => {
    return (
        <div className='content-wrap'>
            <div className="content">
                <div className="left">
                    {/* //*双标签里面的，对应props.children属性 */}
                    {/* <New><h1>12345</h1></New> */}
                    <Switch>
                        
                        <Route exact path='/'><Home/></Route>
                        <Route path='/home'><Home/></Route>
                        {/* //!和上面的 '/' 两个选一个，首页的二级路由要多出来一个 */}
                        {/* //!有二级路由的，不能加exact，否则不能进入二级路由了 */}
                        {/* <Route path='/new'><New/></Route> */}
                        <PrivateRoute path='/new'><New/></PrivateRoute>
                        {/* //! 双标签相当于直接调用了，没有传属性，所以props为空 */}
                        <Route path='/login'><Login/></Route>
                        <Route path='/detail/:id'><Detail/></Route>

                        //! 封装一个这样的route 组件
                        {/* <Route path='/collect' render={(props)=>{
                            //!如果没登录，页面跳走
                            if(!localStorage.getItem('islogin')){
                                props.history.push('/login');
                            }
                            return <h1>收藏页</h1>
                        }}/> */}
                                                                //!这里加的是个变量名，上面封装要加上尖括号表示调用
                        <PrivateRoute path='/collect' compontent={Collect}/>

                        <Route path='/user' render={()=><h1>个人中心</h1>}/>
                        {/* //! 判断一下 没有登录，则个人中心不显示 */}
                        <Route render={()=><h1>您访问的页面不存在</h1>}/>

                        {/* <Route path='/:userName' component={User}/> */}

                        {/* <Redirect to={`/home`}/> */}
                    </Switch>
                </div>
                <div className='right'></div>
            </div>
        </div>
    )
}

export default Content;
